<template>
  <el-container>
    <el-aside style="margin: 5px;margin-bottom: 20px;" width="420px">
      <el-card style="background-color: white; margin-top: 20px;height: 260px;">
        <i class="el-icon-s-custom">&nbsp;</i><span style="font-size: 12px;font-weight: bold;margin-left: 0px">司机</span><br><br><br>
        <el-row style="margin-left: 20px;">
          <span class="el-col-8" style="font-size: 18px;color: skyblue;margin-bottom: 5px" id="driversum"></span>
          <span class="el-col-8" style="font-size: 18px;color: skyblue;margin-bottom: 5px" id="dfdriver"></span>
          <span class="el-col-8" style="font-size: 18px;color: skyblue;margin-bottom: 5px" id="ztdriver"></span>
          <br>
          <span class="el-col-8" style="font-size: 12px;">司机总数</span>
          <span class="el-col-8" style="font-size: 12px;">待发车司机</span>
          <span class="el-col-8" style="font-size: 12px;">在途司机</span>
        </el-row>
        <br><br><br>
        <el-row style="margin-left: 20px;">
          <span class="el-col-8" style="font-size: 18px;color: skyblue;margin-bottom: 5px" id="dfhdriver"></span>
          <span class="el-col-8" style="font-size: 18px;color: skyblue;margin-bottom: 5px" id="rjyssc"></span>
          <br><br>
          <span class="el-col-8" style="font-size: 12px;">待返回司机</span>
          <span class="el-col-8" style="font-size: 12px;">人均运输时长</span>
        </el-row>
      </el-card>

      <el-card style="margin-top: 20px;height: 370px">
        <i class="el-icon-truck">&nbsp;</i><span
        style="font-size: 12px;font-weight: bold;margin-left: 0px">司机</span><br>
        <div id="truckchart" style="height:300px;margin-top: 20px;"></div>

      </el-card>

      <el-card style="margin-top: 20px;height: 450px">
        <i class="el-icon-truck">&nbsp;</i><span
        style="font-size: 12px;font-weight: bold;margin-left: 0px">司机</span><br>
        <div id="transportchat" style="height:300px;width: 385px;margin-top: 60px;"></div>

      </el-card>
    </el-aside>
    <el-card style="margin-top: 24px;margin-bottom: 20px;margin-right: 10px;margin-left: 10px;width: 600px;">
      <div id="chartColumn" style="width: 100%; height: 400px;">
      </div>

    </el-card>
    <el-aside style="margin: 5px;margin-bottom: 20px;" width="340px">
      <el-card style="margin-top: 20px;height: 170px;">


      </el-card>
      <el-card style="margin-top: 20px;height: 480px;">


      </el-card>
      <el-card style="margin-top: 20px;height: 430px;">


      </el-card>
    </el-aside>
  </el-container>
</template>

<style>
@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
</style>

<script src="http://api.map.baidu.com/api?v=3.0&ak=申请的key"></script>
<script src="src/api/work.js"></script>
<script type="text/javascript" src="../../../utils/china.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
<script>
import {getalldriver} from '../../../api/user'
import {getalldfdriver, getallztdriver, getprovinceinfo, gettruckinfos} from '../../../api/base'
import echarts from 'echarts'

export default {
  data() {
    return {
    }
  },
  mounted() {
    this.getdriversum()
    this.getdfdriver()
    this.getztdriver()
    this.gettruckchats()
    this.gettransport()
    this.drawLine();
  },
  methods: {
    getdriversum() {
      getalldriver().then(({data}) => {
        document.getElementById('driversum').innerHTML = data
      })
    },
    getdfdriver() {
      getalldfdriver().then(({data}) => {
        document.getElementById('dfdriver').innerHTML = data
        document.getElementById('dfhdriver').innerHTML = data
        document.getElementById('rjyssc').innerHTML = data
      })
    },
    getztdriver() {
      getallztdriver().then(({data}) => {
        document.getElementById('ztdriver').innerHTML = data
      })
    },
    gettruckchats() {
      var myChart1 = echarts.init(document.getElementById('truckchart'))

      gettruckinfos().then(({data}) => {
        // let datas = [{value: data.fullsum, name: '满载'},{value: data.halfsum,name: '半载'},{value: data.emptysum, name: '空载'}]
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'left',
          },
          series: [
            {
              type: 'pie',
              radius: ['30%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              color: ['#fbc4c4', '#66a8cc', '#8FBC8F'],
              emphasis: {
                label: {
                  show: false,
                  fontSize: '100',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: data.emptysum, name: '空载车'},
                {value: data.halfsum, name: '半载车'},
                {value: data.fullsum, name: '满载车'}
              ]
            }
          ]
        }
        myChart1.setOption(option)
      })

    },

    gettransport() {
      var transportChart = echarts.init(document.getElementById('transportchat'))

      getprovinceinfo().then(({data}) => {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#8FBC8F'
              }
            }
          },
          toolbox: {
            feature: {
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: ['订单数量', '同比增长']
          },
          xAxis: [
            {
              type: 'category',
              data: data.province,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: 0,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 30,
              interval: 5,
            },
            {
              type: 'value',
              min: 0,
              max: 1200,
              interval: 200,
            }
          ],
          series: [
            {
              type: 'bar',
              name: '订单数量',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ml'
                }
              },
              itemStyle: {
                normal: {
                  //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                  barBorderRadius: [10, 10, 10, 10]
                }
              },
              barWidth: '20%',
              data: data.sum
            },
            {
              type: 'line',
              yAxisIndex: 1,
              data: []
            }
          ]
        }
        transportChart.setOption(option)
      })
    },
    randomData() {
      return Math.round(Math.random() * 500);
    },
    drawLine(){
      var myChart = echarts.init(document.getElementById('chartColumn'));
      var path =  'path://M512.4 780.2c-16.2 0-33.4-1.6-54.1-5.2-0.7-0.1-1.3-0.3-1.9-0.4l-23.8-6.8c-8.2-2.4-13.7-10.2-13-18.8 0.1-1.3 0.3-2.5 0.6-3.6v-0.1c1.4-7.5 2.1-14.7 2.1-22-0.1-21.2-5.3-41.9-15.5-61.7-0.3-0.6-0.6-1.2-0.9-1.9-3.3-5.9-7-12.1-11.8-18.2l-0.9-1.2c-0.2-0.2-0.5-0.5-0.6-0.7-5.4-6.6-9.8-11.4-14-15.2-0.6-0.6-1.4-1.2-2.2-1.9l-2-1.7c-0.3-0.2-0.6-0.5-0.8-0.6-4.1-3.4-8.4-6.9-13.2-10.1l-1.2-0.7c-0.3-0.2-0.6-0.3-0.9-0.5-1.6-1-3.4-1.9-5.2-2.7-0.5-0.3-1.6-0.8-2-1.1l-4-2.2c-2.9-1.6-6-3.3-9.5-4.7-4.1-1.6-8.2-2.7-11.5-3.7l-3.7-1.1c-3.1-1-5.7-1.9-8.6-2.3-17.7-3.8-34.6-3.9-52-0.4-0.6 0.1-1.1 0.2-1.7 0.3-0.6 0.1-1.2 0.2-1.9 0.4l-1.5 0.4c-1 0.4-1.9 0.7-2.9 0.9-0.5 0.1-1 0.3-1.5 0.5 0 0-0.8 0.3-0.9 0.3l-1.6 0.5c-0.4 0.1-0.7 0.2-1 0.3-4.1 1.1-8.1 2.2-12.2 3.8-3.6 1.5-6.5 3-8.9 4.3l-3.7 2.1c-0.5 0.3-1 0.5-1.5 0.8l-1.4 0.7c-0.6 0.4-0.8 0.5-1.5 0.8-1.4 0.7-2.7 1.4-4.1 2.1-0.5 0.4-0.9 0.7-1.3 0.9-4.5 2.9-8.5 6.1-12.3 9.3l-2.7 2.2c-1.2 0.9-2.1 1.6-3 2.4-0.4 0.4-0.8 0.8-1.3 1.1-4.7 4.6-8.7 9-12.2 13.4-0.5 0.7-1.2 1.4-1.8 2l-1.5 1.9c-4.1 5.7-7.8 11.7-11.3 18-0.2 0.4-0.4 0.8-0.7 1.1l-0.7 1.1c-5.7 11.2-10 24.1-12.4 37.8-1 5.4-4.3 10-9 12.6-4.8 2.6-10.5 3-15.5 0.9l-19.8-8c-38.1-12.9-63.6-48.2-63.6-87.9v-77.5c0.1-51.1 41.8-92.8 92.9-93h64.8c12.7-160.8 147.9-286.7 308.2-287 160.3 0.2 295.3 126.2 307.5 286.8l65.3 0.3h1.5c36.4 0 73.8 28.8 82.2 53.8 8.3 21.6 9.2 35.6 9.2 40.7V618c0 33.6-18.7 64.7-48.9 81.2-7.5 4-13.7 7-18.9 9.4-5 2.3-10.7 2.3-15.7-0.2-4.9-2.5-8.5-7-9.6-12.4-2.6-12.1-6.7-23.6-12.3-34.3-3.9-7.5-8-14-12.8-20.1-0.5-0.6-1-1.2-1.4-1.8-0.3-0.3-0.4-0.5-0.6-0.8-2.9-3.7-7.4-9.1-13-14.4-0.5-0.4-0.9-0.8-1.2-1.1-0.5-0.4-1.1-0.9-1.6-1.4l-1.1-0.8c-0.5-0.4-1.1-0.8-1.6-1.3-3.6-3-8-6.5-13.4-10.3-0.2-0.1-0.3-0.2-0.3-0.2-2.4-1.4-4.3-2.5-6.2-3.4-0.3-0.1-0.6-0.3-0.8-0.4l-6.8-3.7c-2.6-1.4-5.4-2.9-8.5-4.2-3.3-1.3-7.1-2.5-11.5-3.7l-2.9-0.8c-0.4-0.1-0.8-0.2-1.3-0.4-2.5-0.9-5.3-1.8-8.7-2.4-18.3-3.6-35.1-3.4-52.3 0-3.6 0.7-6.6 1.7-8.5 2.4-0.3 0.1-0.7 0.2-1 0.3l-4.6 1.3c-3.3 0.9-6.8 1.9-10.1 3.3-3.9 1.5-7.1 3.3-10.2 5l-2.4 1.3c-0.1 0.1-0.8 0.4-0.9 0.5-2.6 1.3-5 2.7-7.4 4-0.4 0.3-0.8 0.6-1.2 0.8-4.8 3.1-9.5 6.6-14.3 10.8-0.3 0.3-0.9 0.8-1.3 1.1-1 0.7-1.9 1.4-2.9 2.3-5 4.7-9.5 9.6-13.7 14.9l-2.9 3.3c-4 5.4-7.9 11.7-11.9 19.2 0 0.1-0.1 0.2-0.1 0.3 0 0.1-0.1 0.1-0.1 0.2-10.2 19.8-15.4 40.4-15.6 61.4 0 6.2 0.6 12.7 1.8 19.7 1.5 8.8-3.5 17.4-12 20.2l-24.7 8.4c-0.6 0.2-1.1 0.4-1.7 0.5-23.3 5.7-46.5 8.5-68.5 8.5z m-47-40.6c18.1 3.1 33.1 4.5 47 4.5 19 0 39.1-2.4 59.8-7.2l9.9-3.3c-0.3-3.6-0.4-7.1-0.4-10.6 0.2-26.8 6.8-52.9 19.5-77.7l0.3-0.6c0.1-0.1 0.1-0.3 0.2-0.4 5-9.3 10-17.2 15.2-24.2 0.3-0.4 0.5-0.7 0.8-1l2.9-3.3c4.8-6.1 10.4-12.2 16.6-18 1.7-1.6 3.4-3 5.3-4.4 5.8-5.1 11.7-9.5 17.7-13.5 0.1-0.1 0.2-0.1 0.2-0.2 0.6-0.5 1.3-1 2-1.4 3.4-2 6.8-3.9 10.5-5.7l2.2-1.2c3.7-2 8.4-4.6 14-6.7 4.9-2.1 9.8-3.5 13.8-4.6l3.6-1c4.7-1.7 9.1-2.9 13.5-3.8 22.7-4.4 44.5-4.2 65.9 0 5.4 1 10 2.4 13.4 3.6l2 0.5c5.7 1.6 10.7 3.2 15.3 4.9 5.3 2.1 9.4 4.3 12.7 6.1l6.7 3.6c2.6 1.3 5.1 2.7 7.5 4.1 0 0 0.8 0.5 1.4 0.8 0.4 0.2 0.8 0.5 1.2 0.7 6.8 4.7 12.2 9 16.5 12.6l0.3 0.3 0.3 0.2c1.1 0.9 1.7 1.4 2.4 1.9l0.8 0.7c0.3 0.2 0.6 0.5 0.9 0.7 0.2 0.1 0.5 0.4 0.7 0.7 0.3 0.3 0.7 0.5 1 0.8 7.5 6.9 13.2 13.8 17 18.6 0.6 0.7 1.1 1.4 1.7 2.1 0.4 0.4 0.7 0.8 0.9 1.1 5.9 7.5 11.4 16 16.3 25.6 3.5 6.8 6.6 13.9 9.2 21.2 17.4-10.4 27.9-28.3 27.9-48.3v-76.2c0-1-0.2-10.7-6.9-28.1-0.1-0.3-0.3-0.7-0.4-1-3.1-9.9-26.8-29.3-48-29.3h-66.5c-18.8 0-34.7-14.7-36.3-33.5-10.8-142.1-130-253.4-271.5-253.6-141.5 0.2-261 111.5-271.8 253.4-1.4 18.9-17.3 33.6-36.3 33.6h-64.7c-31.3 0.1-56.8 25.6-56.9 56.9v77.5c0 24.2 15.6 45.7 39 53.6l1.1 0.4c0.4 0.1 0.7 0.2 1 0.4l0.4 0.1c2.9-9.4 6.5-18.4 10.9-27l0.9-1.7c0.2-0.4 0.4-0.7 0.6-1l0.3-0.5c4.1-7.5 8.5-14.4 13.4-21.3l0.9-1.3c0.2-0.3 0.4-0.6 0.7-0.9l0.8-1c0.1-0.1 0.7-0.9 0.8-0.9 0.6-0.7 1.1-1.3 1.7-1.9 4.4-5.4 9.4-10.8 15.3-16.6 0.2-0.2 0.6-0.6 0.8-0.7 0.3-0.3 0.6-0.6 1-0.8 1.5-1.3 3.1-2.6 5-4.1l1.8-1.4c4.1-3.3 9-7.5 15-11.3 0.3-0.2 0.5-0.4 0.7-0.5 0.5-0.3 1.5-1 2-1.3 2.1-1.2 4.3-2.4 6.5-3.5 0.4-0.2 0.9-0.5 1.3-0.7 1-0.6 2-1.2 3-1.6l3.3-1.8c3-1.6 7.1-3.8 12.4-6 6.3-2.4 11.7-3.9 16-5.1l0.7-0.3c1.5-0.5 2.7-0.9 3.8-1.2 1-0.4 2-0.8 3.1-1l3.2-0.8c2.1-0.5 3.9-0.8 5.5-1 22-4.4 44.6-4.1 65.3 0.5 4.6 0.8 9.1 2.2 12 3.2l2.4 0.7c0.1 0 1 0.3 1.1 0.3 4 1.2 9 2.6 14.7 4.8 5.8 2.4 10.4 4.9 13.7 6.7l2.5 1.3c0.5 0.2 0.9 0.5 1.3 0.7l0.7 0.5c2.8 1.4 5.5 2.7 8.3 4.5l1.3 0.7c0.4 0.2 0.8 0.5 1.2 0.7 6.2 4.2 11.6 8.5 16.5 12.5 0.6 0.4 1.3 1 1.6 1.3l1.8 1.6c1.1 0.9 2.1 1.8 3.1 2.7 5.5 5.1 11 11.1 17.4 18.8 0.7 0.8 1.6 1.9 2.5 3.2 6.5 8.4 11.4 16.8 15.3 23.9 0.4 0.8 0.8 1.6 1.1 2.5 12.5 24.6 18.9 50.5 19 77.2 0 4.7-0.2 9.4-0.7 14.1l7.7 2.4z m246.9-256.2h-400c-10.3 0-20.2-4.4-27.2-12.1-7-7.8-10.2-18.2-9-28.6 14-120.1 115.6-210.9 236.1-211.2h0.1c120.4 0.3 221.9 91.1 236.1 211.3 1.2 10.8-2.2 21.2-9.3 28.8-6.6 7.3-16.5 11.8-26.8 11.8zM512.4 267.5c-102.3 0.3-188.4 77.4-200.3 179.4l400.3 0.4c-11.8-102.4-97.9-179.5-200-179.8z';

      var XAData = [
        [{name: '新疆'}, {name: '北京', value: 100}],
        [{name: '青海'}, {name: '上海', value: 100}],
        [{name: '辽宁'}, {name: '广东', value: 100}],
        [{name: '黑龙江'}, {name: '北京', value: 100}],
        [{name: '云南'}, {name: '山东', value: 100}]
      ];
      var mapFeatures = echarts.getMap("china").geoJson.features;
      var geoMap = {};
      mapFeatures.forEach(function (v) {
        var name = v.properties.name;
        geoMap[name] = v.properties.cp;
      });
      var linesData = [];
      var scatterData=[];
      for (var i = 0; i < XAData.length; i++) {
        var item = XAData[i];
        scatterData.push({
          name:item[0].name,
          value:geoMap[item[0].name].concat(item[1].value)
        });
        scatterData.push({
          name:item[1].name,
          value:geoMap[item[1].name].concat(item[1].value)
        });
        var fromCood = geoMap[item[0].name];
        var toCood = geoMap[item[1].name];
        linesData.push({
          fromName: item[0].name,
          toName: item[1].name,
          coords: [fromCood, toCood],
          value: item[1].value
        })
      }
      console.log(scatterData)
      var optionMap = {
        backgroundColor: '#FFFFFF',
        title: {
          text: '全国地图大数据',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        geo: {
          show: true,
          map: 'china',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true,
            }
          },
          roam: false,

        },
        //配置属性
        series: [{
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 5,			//箭头指向速度，值越小速度越快
            trailLength: 0, 	//特效尾迹长度[0,1]值越大，尾迹越长重
            color: 'green',		//图标颜色
            symbol: path,		//图标样式
            symbolSize: 20		//图标大小
          },
          lineStyle: {
            normal: {
              width: 1,		//尾迹线条宽度
              color: 'green',	//尾迹线条颜色
              curveness: 0.2,	//尾迹线条曲直度
              opacity: 1		//尾迹线条透明度
            }
          },
          data: linesData
        },{
          name: '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: scatterData,
          symbolSize: function(val) {
            return val[2] / 5;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'left',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#2B91B7',
              shadowBlur: 10,
              shadowColor: '#2B91B7'
            }
          },
          zlevel: 999
        }]
      };

      myChart.setOption(optionMap);
    }

  }
}
</script>
